<template>
  <div class="question">
      <Top></Top>
    <div class="bgcolor">
      <div class="wrap">
        <div class="list">
            <div class="title">
                <h3>题库练习</h3>
                <span>{{title}}</span>
            </div>
            <ul>
            <li v-for="(item,index) in list" :key="index" data-type="index">
              <img src="@/assets/images/icon/danxuan.png" alt="" />
              <h3>{{item.title}} 300题</h3>
              <span>已学100题</span>
              <router-link class="starBtn" :to="{path:'/practice',query:{id:item.id,lm_id:item.lm_id,name:title}}" >开始练习</router-link>
            </li>
            <!-- 
            <li>
              <img src="@/assets/images/icon/kslx.png" alt="" />
              <h3>随机练习 300题</h3>
              <span>已学100题</span>
              <el-button round size="mini"><a href="">开始练习</a></el-button>
            </li>
            <li>
              <img src="@/assets/images/icon/keguan.png" alt="" />
              <h3>客观 300题</h3>
              <span>已学100题</span>
              <el-button round size="mini"><a href="">开始练习</a></el-button>
            </li> -->
          </ul>
          <!-- <div style="text-align:center" v-else> 暂无内容</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from "@/components/layout/top";

export default {
  components: {
    Top,
  },
  data() {
    return {
      title: "",
      list:[],
      pid:1
    };
  },
  mounted() {
    this.pid = this.$route.query.pid
    this.title = this.$route.query.name
    this.tiKu()
  },
  methods:{
    tiKu(){
      this.$axios.post("/api/Course/getTiku",{pid:this.pid}).then(res=>{
        this.list = res.data.data
        console.log(res.data)
      })
    },
    // jump(id,lm_id){
    //   this.$router.push({
    //     path:'/practice',
    //     query:{id:id,lm_id:lm_id}
    //   })
    // }

  }
};
</script>
<style  scoped>
.bgcolor {
  background: #f5f5f5;
  padding: 30px 0;
}
.list{
    background-color: #fff;
    padding:20px 0;
}
.title{
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin: 20px;
  color: #525252;
  display: flex;
  justify-content: space-between;
}
.list ul {
    display: flex;
    margin: 20px auto;
    padding: 0 30px;
}
.list ul li {
  width: 200px;
  height: 280px;
  background-color: #75C4FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  border-radius: 10px;
  box-shadow: 1px 7px 10px 0px rgba(57, 57, 57, 0.18);;
  padding: 20px 0;
  margin-right: 20px;
  box-sizing: border-box;
}
.list ul li:last-child{
  margin-right: 0;
}
.starBtn{
  background-color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
}
</style>